import { defineStore } from 'pinia'
import { ref } from 'vue'

export interface ChartData {
  id: string
  title: string
  type: 'line' | 'bar' | 'pie' | 'radar'
  data: any[]
  labels?: string[]
}

export interface DashboardData {
  totalSales: number
  totalUsers: number
  totalOrders: number
  growthRate: number
  recentCharts: ChartData[]
}

export const useAppStore = defineStore('app', () => {
  // 应用主题
  const theme = ref<'light' | 'dark'>('light')
  
  // 加载状态
  const loading = ref(false)
  
  // 仪表板数据
  const dashboardData = ref<DashboardData>({
    totalSales: 0,
    totalUsers: 0,
    totalOrders: 0,
    growthRate: 0,
    recentCharts: []
  })
  
  // 图表数据
  const chartList = ref<ChartData[]>([])
  
  // 设置主题
  const setTheme = (newTheme: 'light' | 'dark') => {
    theme.value = newTheme
  }
  
  // 设置加载状态
  const setLoading = (state: boolean) => {
    loading.value = state
  }
  
  // 更新仪表板数据
  const updateDashboardData = (data: Partial<DashboardData>) => {
    dashboardData.value = { ...dashboardData.value, ...data }
  }
  
  // 添加图表
  const addChart = (chart: ChartData) => {
    chartList.value.push(chart)
  }
  
  // 更新图表
  const updateChart = (id: string, chart: Partial<ChartData>) => {
    const index = chartList.value.findIndex(item => item.id === id)
    if (index !== -1) {
      chartList.value[index] = { ...chartList.value[index], ...chart }
    }
  }
  
  // 删除图表
  const removeChart = (id: string) => {
    const index = chartList.value.findIndex(item => item.id === id)
    if (index !== -1) {
      chartList.value.splice(index, 1)
    }
  }
  
  return {
    theme,
    loading,
    dashboardData,
    chartList,
    setTheme,
    setLoading,
    updateDashboardData,
    addChart,
    updateChart,
    removeChart
  }
})